<template>
  <view class="search">
    <view class="u-p-20">
      <!-- 搜索组件 -->
      <u-search
        placeholder="输入商品名"
        :action-style="{
          backgroundColor: '#ea4350',
          color: '#fff',
          height: '64rpx',
          lineHeight: '64rpx',
          borderRadius: '15rpx',
        }"
        v-model="keyword"
        @custom="handleSearch"
        @change="handleInputChange"
      ></u-search>
      <!-- 列表 -->
      <!-- 第一种 -->
      <view class="search-list u-m-t-10">
        <!-- <navigator
          v-for="item in goods"
          :key="item.goods_id"
          :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        >
          <view class="goods-img-wrap">
            <u-image
              mode="widthFix"
              :src="
                item.goods_small_logo ||
                'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'
              "
            ></u-image>
          </view>
          <view class="goods-info-wrap">
            <view class="goods_name u-line-2">{{ item.goods_name }}</view>
            <view class="goods_price">￥{{ item.goods_price }}</view>
          </view>
        </navigator> -->
        <!-- 第二种 -->
        <navigator
          :url="`/pages/goods_list/goods_list?query=${item.goods_name}`"
          v-for="item in goodsKeyword"
          :key="item.goods_id"
          >{{ item.goods_name }}</navigator
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      //   goods: [],
      // 商品关键字列表
      goodsKeyword: [],
    };
  },
  methods: {
    // 点击搜索按钮  /
    handleSearch() {
      //   console.log(123);
      // 携带参数 跳转到商品列表页面
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?query=${this.keyword}`,
      });
    },
    // 搜索框值改变触发事件
    handleInputChange() {
      // console.log(this.keyword);
      //   this.goodsSearch(this.keyword);

      // 解决方式一  好理解一些
      // this.$u.debounce(() => {
      // this.goodsQsearch(this.keyword);
      // }, 500); // 没有传递参数 错误！！

      // 解决方式二 bind   了解
      // bind 修改this指向的同时 会返回一个函数   传递返回的函数需要用到的参数
      // 返回一个 接收参数的函数  不是用它修改this指向的功能
      this.$u.debounce(this.goodsSearch.bind(this, this.keyword), 500); // 没有传递参数 错误！！
    },
    // 根据关键字来搜索商品
    // 这个接口是用来实现  第一种 搜索中心业务
    // async getGoodsList(keyword) {
    //   const params = {
    //     query: keyword,
    //     cid: "",
    //     pagenum: 1,
    //     pagesize: 20,
    //   };
    //   const res = await this.$u.get("/goods/search", params);
    //   this.goods = res.message.goods;
    // },
    // 这个接口是用来实现  第一种 搜索中心业务
    // 根据搜索关键字 来返回 数据
    async goodsSearch(query) {
      if (!query) return;
      const res = await this.$u.get("/goods/search", { query });
      console.log(res);
      this.goodsKeyword = res.message.goods;
      //   console.log();
    },
  },
};
</script>

<style lang="scss">
.search {
  padding: 15rpx;
}
.search-list {
  navigator {
    // display: flex;
    // .goods-img-wrap {
    //   flex: 1;
    //   padding: 15rpx;
    // }
    // .goods-info-wrap {
    //   flex: 3;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-around;
    //   .goods_name {
    //   }
    //   .goods_price {
    //     color: red;
    //     font-size: 30rpx;
    //   }
    // }
    font-size: 28rpx;
    padding: 20rpx;
  }
}
</style>